<template>
  <div class="skeleton">
    <!-- 搜索框骨架 -->
    <div class="skeleton-search-input skeleton-animation"></div>
    <!-- 轮播图骨架 -->
    <div class="skeleton-banner skeleton-animation"></div>

    <!-- 商品种类骨架 -->
    <div class="skeleton-category">
      <div
        class="skeleton-category-item skeleton-animation"
        v-for="i in 5"
        :key="i"
      ></div>
    </div>

    <!-- 商品卡片骨架 -->
    <div class="skeleton-product">
      <div
        class="skeleton-product-item skeleton-animation"
        v-for="i in 10"
        :key="i"
      ></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'appHomePageSkeleton',
};
</script>

<style scoped lang="scss">
.skeleton {
  width: 100%;
  padding: 10px;
  background-color: #ffffff;
  box-sizing: border-box;
  &-search-input {
    width: 100%;
    height: 30px;
    background-color: #e0e0e0;
    margin-bottom: 10px;
    animation: pulse 2s infinite;
    border-radius: 10px; // 添加圆角
  }
  &-banner {
    width: 100%;
    height: 200px;
    background-color: #e0e0e0;
    margin-bottom: 10px;
    animation: pulse 2s infinite;
    border-radius: 10px; // 添加圆角
  }

  &-category {
    display: flex;
    justify-content: space-between;

    &-item {
      width: 60px;
      height: 60px;
      background-color: #e0e0e0;
      animation: pulse 2s infinite;
      border-radius: 10px; // 添加圆角
    }
  }

  &-product {
    margin-top: 10px;

    &-item {
      width: 100%;
      height: 200px;
      background-color: #e0e0e0;
      margin-bottom: 10px;
      animation: pulse 2s infinite;
      border-radius: 10px; // 添加圆角
    }
  }
}
.skeleton-animation {
  position: relative;
  overflow: hidden;
  background: transparent;
}
.skeleton-animation::after {
  position: absolute;
  top: 0;
  inset-inline-end: -150%;
  bottom: 0;
  inset-inline-start: -150%;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.06) 25%,
    rgba(0, 0, 0, 0.15) 37%,
    rgba(0, 0, 0, 0.06) 63%
  );
  animation-name: skeleton-loading;
  animation-duration: 1.4s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
  content: '';
}
@keyframes skeleton-loading {
  0% {
    transform: translateX(-37.5%);
  }
  100% {
    transform: translateX(37.5%);
  }
}
</style>
